<!--
 下拉加载组件
-->
<template>
  <el-select
    v-loadMore="loadMore"
    v-model="value"
    :clearable="clearable"
    :filterable="filterable"
    :placeholder="placeholder"
    :style="styleSelect"
    :size="size"
    :multiple="multiple"
    @visible-change="visibleChange"
    @change="Change"
    @clear="clear"
  >
    <el-option
      v-for="item in dataList"
      :key="item.id"
      :label="item.names"
      :value="item.id"
    >
    </el-option>
    <div
      class="div_box"
      v-loading="loading"
      :style="loading ? '' : 'display: none;'"
    ></div>
  </el-select>
</template>

<script>
import loadMore from "@mixin/loadMore";
export default {
  mixins: [loadMore],
  props: {
    //   name: {
    //     type: String,
    //     default: "name",
    //   },
    placeholder: {
      type: String,
      default: "请选择",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    filterable: {
      type: Boolean,
      default: true,
    },
    dataList: {
      type: Array,
      default: () => [],
    },
    total: {
      required: true,
      type: Number,
      default: 0,
    },
    limit: {
      type: Number,
      default: 10,
    },
    // loading: {
    //   type: Boolean,
    //   default: false,
    // },
    size: {
      type: String,
      default: "small",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    styleSelect: {
      type: String,
      default: "''",
    },
  },
  data() {
    return {
      value: "",
      page: 1,
      loading: false,
    };
  },
  mounted() {},
  methods: {
    // 获取列表数据
    // async getDataList() {
    //   console.log(112);
    //   await this.$emit("getDataList", { page: this.page, limit: this.limit });
    // },

    // 点击事件
    visibleChange(val) {
      this.$emit("visibleChange", { val, page: this.page, limit: this.limit });
    },

    // 下拉加载更多
    async loadMore() {
      if (this.page >= Math.ceil(this.total / this.limit)) return;
      this.page++;
      this.loading = true;
      await this.$emit("getDataList", { page: this.page, limit: this.limit });
      this.loading = false;
    },

    // 点击一项
    Change(val) {
      this.$emit("change", val);
    },

    // 清空点击
    clear() {
      this.$emit("clear");
    },
  },
};
</script>

<style scoped lang="less">
// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
  // background: red;
  // opacity: 0.5;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}
// 下拉框加载结束
</style>
